import {reqGetGroups} from '@/api'
import {BASE_URL} from '@/constant'
import {Group} from '@/types'
import {Swiper, Grid} from 'antd-mobile'
import {useEffect, useState} from 'react'
import {useNavigate} from 'react-router-dom'
import {getCurrentCity} from '@/utils/city'
import {useAppSelector} from '@/hooks'
import NewItem from '@/components/NewItem'
import SearchHeader from '@/components/SearchHeader'
import './index.less'

import nav_1 from '@/assets/images/nav-1.png'
import nav_2 from '@/assets/images/nav-2.png'
import nav_3 from '@/assets/images/nav-3.png'
import nav_4 from '@/assets/images/nav-4.png'

// 导航菜单数据
const navs = [
    {
        id: 1,
        img: nav_1,
        title: '整租',
        path: '/list'
    },
    {
        id: 2,
        img: nav_2,
        title: '合租',
        path: '/list'
    },
    {
        id: 3,
        img: nav_3,
        title: '地图找房',
        path: '/map'
    },
    {
        id: 4,
        img: nav_4,
        title: '去出租',
        path: '/rent/add'
    }
]

const HomeIndex = () => {
    const nav = useNavigate()

    // 轮播图状态数据
    const imgList = useAppSelector((state) => state.home.imgList)
    // 最新资讯
    const news = useAppSelector((state) => state.home.news)
    // 租房小组数据
    const [groupList, setGroupList] = useState<Group[]>([])
    // 当前城市名称
    const [curCityName, setCurCityName] = useState('上海')

    // 获取租房小组数据的方法
    const getGroups = async (area = 'AREA%7C88cff55c-aaa4-e2e0') => {
        const res = await reqGetGroups(area)
        if (res.status === 200) {
            setGroupList(res.body)
        }
    }

    // 获取当前定位城市
    const getCurCity = async () => {
        const curCity = (await getCurrentCity()) as {label: string; value: string}
        setCurCityName(curCity.label)
    }

    useEffect(() => {
        getGroups()
        getCurCity()
    }, [])

    return (
        <div className='index'>
            <div className='swiper'>
                {imgList.length > 0 && (
                    <Swiper autoplay loop>
                        {imgList.map((item) => (
                            <Swiper.Item key={item.id}>
                                <a
                                    href='/home'
                                    style={{display: 'inline-block', width: '100%', height: 212}}
                                    onClick={(e) => e.preventDefault()}
                                >
                                    <img
                                        src={BASE_URL + item.imgSrc}
                                        alt={item.alt}
                                        style={{width: '100%', verticalAlign: 'top'}}
                                    />
                                </a>
                            </Swiper.Item>
                        ))}
                    </Swiper>
                )}

                <SearchHeader cityName={curCityName} />
            </div>

            <Grid columns={navs.length} className='nav'>
                {navs.map((item) => (
                    <Grid.Item key={item.id} onClick={() => nav(item.path)}>
                        <img src={item.img} alt='' />
                        <h2>{item.title}</h2>
                    </Grid.Item>
                ))}
            </Grid>

            <div className='group'>
                <h3 className='group-title'>
                    租房小组
                    <span className='more'>更多</span>
                </h3>
                <Grid columns={2} gap={10}>
                    {groupList.map((item) => (
                        <Grid.Item key={item.id}>
                            <div className='desc'>
                                <p className='title'>{item.title}</p>
                                <span className='info'>{item.desc}</span>
                            </div>
                            <img src={BASE_URL + item.imgSrc} alt='' />
                        </Grid.Item>
                    ))}
                </Grid>
            </div>

            <div className='news'>
                <h3 className='group-title'>最新资讯</h3>
                {news.map((item) => (
                    <NewItem key={item.id} item={item} />
                ))}
            </div>
        </div>
    )
}

export default HomeIndex
